<template>
	<view>
		<view class="bj-list">
			<view class="bj-item">
				<view class="main-content">
					<view class="left-icon">
						<!-- <image
							:src="dataInfo.picture">
						</image> -->
						<image v-if="dataInfo.picture" :src="dataInfo.picture"></image>
						<image style="width:136rpx;height: 136rpx;" v-if="!dataInfo.picture"
							src="../../../static/images/index/weibaorenwu.png" mode=""></image>
					</view>
					<view class="right-txt">
						<view class="title">{{dataInfo.partNum}}{{dataInfo.partName}}</view>
						<view class="txt-content">
							<view class="left">实际库存：</view>
							<view class="right">{{dataInfo.realStock}}</view>
						</view>
						<!-- <view class="txt-content">
							<view class="left">可用库存：</view>
							<view class="right">{{dataInfo.availableStock}}</view>
						</view> -->
						<view class="txt-content">
							<view class="left">{{dataInfo.partTypeName}}</view>
							<!-- <view class="right">{{dataInfo.storehouseName}}</view> -->
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="selectChukuType">
				<view class="left">
					<view style="color: red;">*</view>出库类型
				</view>
				<view class="right1">
					<view :class="[params.retrievalType!=''?'txt-black':'']">
						{{params.retrievalType==''?'请选择':params.retrievalType}}
					</view>
					<view class="iconfont icon-app-xiangyou" :style="params.retrievalType!=''?'color: #2B2B2B;':''">
					</view>
				</view>
			</view>
		</view>
		<view>
			<view v-for="(c,index) in List" :key="index">
				<view class="bx-list" style="margin-top: 2rpx;">
					<view class="bx-list-title" @click="togoBatcheSelect(c,index)">
						<view class="left">
							<view style="color: red;">*</view>出库批次
						</view>
						<view class="right1">
							<!-- <view>请选择</view> -->
							<view :class="[c.batchNum!=''?'txt-black':'']">
								{{c.batchNum==''?'请选择':(c.batchNum+'--'+c.expireDate)}}
							</view>
							<view class="iconfont icon-app-xiangyou" :style="c.batchNum!=''?'color: #2B2B2B;':''">
							</view>
						</view>
					</view>
				</view>
				<view class="bx-list" style="margin-top: 2rpx;" v-if="c.stockNum">
					<view class="bx-list-title">
						<view class="left">
							<view style="color: red;">*</view>出库数量 <view
								style="color: #8c8c8c;font-size: 28rpx;margin-left: 20rpx;" v-if="c.stockNum">
								库存数量:{{c.stockNum}}</view>
						</view>
						<view class="right1">
							<view class="txt-right">
								<view class="addnum">
									<u-number-box v-model="c.chukuNum" :name="index" @change="onChange"
										:disablePlus="c.chukuNum>=c.stockNum">
									</u-number-box>
									<!-- <u-number-box v-model="c.chukuNum" @change="onChange" :name="index"
										:disablePlus="c.chukuNum>=c.stockNum">
										<view slot="minus" class="minus">
											<view class="iconfont icon-app-jianjinyong" style="font-size: 40rpx;">
											</view>
										</view>
										<text slot="input" style="width:40px; text-align: center;font-size: 28rpx;"
											class="input">{{c.chukuNum}}</text>
										<view slot="plus" class="plus">
											<view class="iconfont icon-app-jiajinyong"
												style="font-size: 40rpx; color: #0F53AC	;"></view>
										</view>
									</u-number-box> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="delete-pc" v-if="index>0" @click="deleteBatche(item,index)">
					删除次批次
				</view>
				<view class="line8"></view>
			</view>
			<!-- <view class="addbtn-wrapper">
				<view class="add-btn" @click="addChukubatchNum(item,index)">
					添加出库批次
				</view>
			</view> -->

		</view>
		<view class="clear-bottom"></view>
		<view class="btn-botom2">
			<view class="left-btn">
				<view class="ckNum">出库数量：{{totalNum}}件</view>
				<view>总价值： <text style="color: #fa4016; margin-right: 10rpx;">{{totalPrice}}</text>元</view>
			</view>
			<view class="btn">
				<view class="right-btn2" @click="addChukubatchNum">+出库批次</view>
				<view class="right-btn" @click="togoConfirm">确定</view>
			</view>
		</view>
		<!-- 出库类型 -->
		<u-popup :show="show" mode="bottom" :round="10" @close="close" @open="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem(item)" v-for="(item,index) in chukuList" :key="index">
					{{item.configValue}}
				</view>
			</view>
		</u-popup>
		<!-- 出库批次-->
		<u-popup :show="showBatch" mode="bottom" :round="10" @close="close2" @open="open2">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem2(item)" v-for="(item,index) in batchList" :key="index">
					{{item.batchNum}}--{{item.expireDate}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showBatch: false,
				dataInfo: {},
				detailInfo: {},
				List: [{
					partId: '',
					id: '',
					batchNum: '', //批次
					stockNum: '', //库存
					chukuNum: 1, //出库数量
					price: '',
					isChecked: false,
					expireDate: ''
				}],
				chukuList: [],
				params: {
					retrievalType: '', //出库类型
					detailRequests: []
				},
				batchList: [],
				selectIndex: '',
				totalNum: 0,
				totalPrice: 0
			}
		},
		onLoad(options) {
			if (options) {
				this.dataInfo = JSON.parse(decodeURIComponent(options.items));
				this.List[0].partId = this.dataInfo.id;
			}
			console.log('this.dataInfo===>', this.dataInfo)
			this.getChukuTypeList();
			this.getPartBatchList();
		},
		methods: {
			getPartBatchList() {
				uni.$u.http.get(`/device/mobile/devicePartBatch/getPartBatchList/${this.dataInfo.id}/1`).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						this.batchList = res.data;
						let item = res.data[0]
						this.List[0].batchNum = item.batchNum;
						this.List[0].stockNum = item.stockAmount;
						this.List[0].id = item.id;
						this.List[0].price = item.price;
						this.List[0].isChecked = true;
						this.List[0].expireDate = item.expireDate;
					}
				}).catch(err => {})
			},
			getChukuTypeList() {
				uni.$u.http.post(`/device/mobile/sysDataDictionary/dictionaryList`, {
					configType: 'retrieval_type'
				}).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						this.chukuList = res.data;
					}
				}).catch(err => {})
			},
			//添加出库批次
			addChukubatchNum(item, index) {
				if (this.batchList.length == this.List.length) return uni.$u.toast('添加出库批次数不可超过总批次数')
				this.List.push({
					partId: this.dataInfo.id,
					id: '',
					batchNum: '', //批次
					stockNum: '', //库存
					chukuNum: 1, //出库数量
					price: '',
					isChecked: false
				})
			},
			//删除出库批次
			deleteBatche(item, index) {
				this.List.splice(index, 1);
				this.getTotalNumAndPrice();
			},
			open() {},
			close() {
				this.show = false
			},
			updateItem(item) {
				this.show = false;
				this.params.retrievalType = item.configValue;
			},
			//选择出库类型
			selectChukuType() {
				this.show = true;
			},
			open2() {},
			close2() {
				this.showBatch = false
			},
			updateItem2(item) {
				// this.params.retrievalType=item.configValue;
				console.log('updateItem2===>', item, this.List)
				let dd = true;
				this.List.forEach(s => {
					if (s.id == item.id) {
						uni.$u.toast('该批次已被选择')
						return dd = false
					}
				})
				if (dd) {
					this.List[this.selectIndex].batchNum = item.batchNum;
					this.List[this.selectIndex].stockNum = item.stockAmount;
					this.List[this.selectIndex].id = item.id;
					this.List[this.selectIndex].price = item.price;
					this.List[this.selectIndex].isChecked = true;
					this.List[this.selectIndex].expireDate = item.expireDate;
					this.getTotalNumAndPrice();
				}
				this.showBatch = false;
			},

			togoBatcheSelect(c, index) {
				this.showBatch = true;
				this.selectIndex = index;
			},
			onChange(e) {
				console.log('dfsfsdfdsfsd', e)
				this.List[e.name].chukuNum = e.value;
				if (this.List[e.name].chukuNum > this.List[e.name].stockNum) {
					this.List[e.name].chukuNum = this.List[e.name].stockNum;
					this.getTotalNumAndPrice();
					return uni.$u.toast('出库数量不能超过最大库存数量')
				}
				this.getTotalNumAndPrice();
			},
			togoConfirm() {
				if (!this.params.retrievalType) return uni.$u.toast('请选择出库类型')
				console.log('this.List===>', this.List)
				this.List.forEach(item => {
					if (item.isChecked) {
						let dd = {
							partId: item.partId,
							batchId: item.id,
							amount: item.chukuNum
						}
						this.params.detailRequests.push(dd);
					}
				})
				if (this.params.detailRequests.length == 0) return uni.$u.toast('请选择出库批次')
				console.log('提交参数===>', this.params)
				uni.$u.http.post(`/device/mobile/devicePartRetrieval/savePartRetrieval`, this.params).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						uni.$u.toast('提交成功');
						// setTimeout(()=>{
						uni.$emit('currentId', 1)
						uni.navigateTo({
							url: '/pages/subPackagesB/bjlist/beijianList'
						})
						// },1000)
					}
				}).catch(err => {})
			},
			getTotalNumAndPrice() {
				this.totalNum = 0;
				this.totalPrice = 0;
				this.List.forEach(item => {
					if (item.isChecked) {
						this.totalNum = this.totalNum + item.chukuNum;
						this.totalPrice = this.totalPrice + (item.price * item.chukuNum);
					}

				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.bj-list {
		margin-top: 2rpx;
		background: #f2f2f2;

		.bj-item {
			background: #fff;
			padding: 20rpx;

			.main-content {
				display: flex;
				margin-top: 10rpx;



				.left-icon {
					image {
						width: 136rpx;
						height: 136rpx;
						border-radius: 8rpx;
					}
				}

				.right-txt {
					padding-left: 32rpx;

					.title {
						font-size: 34rpx;
						color: #000000;
					}

					.txt-content {
						display: flex;
						color: #8c8c8c;
						font-size: 28rpx;
						margin-bottom: 10rpx;

						.right {
							color: #000000;
							padding-left: 4rpx;
						}
					}
				}
			}

			.item-btn {
				border-top: 1px solid #f2f2f2;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx 0;
				margin-top: 20rpx;

				.chuku {
					width: 45%;
					font-size: 34rpx;
					color: #8c8c8c;
					text-align: center;
				}

				.ruku {
					width: 45%;
					font-size: 34rpx;
					color: #0F53AC;
					text-align: center;
				}

				.su-line {
					width: 4rpx;
					height: 50rpx;
					background: #f2f2f2;
				}
			}
		}

		.bj-item:first-child {
			margin-top: 0;
		}

		.dropdown {
			.list2 {
				background: #fff;

				.sort {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #000000;
					padding: 20rpx 0;
				}
			}

			.sort-list {
				width: 100%;
				height: 200vh;
				background: #9d9d9d;
				position: absolute;
				z-index: 22;

				.sort-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 40rpx 10rpx 20rpx;
					font-size: 34rpx;
					border-bottom: 1px solid #f2f2f2;
					z-index: 99;
					position: relative;
					background: #fff;
				}

				.sort-item:last-child {
					border-bottom: none;
				}

				.sort-item:first-child {
					border-top: 1px solid #f2f2f2;
				}
			}
		}
	}

	.bx-list {
		background: #fff;
		border-bottom: 2rpx solid #f5f5f5;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;

			.left {
				display: flex;
				font-size: 34rpx;
				font-weight: 400;
				// letter-spacing: 0px;
				line-height: 0px;
				color: #4d4d4d;
				min-width: 180rpx;
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #8c8c8c;

				.txt-black {
					text-align: end;
					width: 400rpx;
					color: #2B2B2B;
					font-size: 16px;
					font-weight: 400;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		.input-textrea {
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}

	.delete-pc {
		height: 96rpx;
		color: #fa4016;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		background: #ffffff;
		// border-top: 1px solid #EDEDED;
		margin: 2rpx 20rpx 0 20rpx;
	}

	.addbtn-wrapper {
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #EDEDED;
		border-top: 1px solid #EDEDED;
		color: #0F53AC;
	}

	.clear-bottom {
		width: 100%;
		height: 120rpx;
	}

	.btn-botom2 {
		width: 95%;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 26rpx 32rpx;
		background: #fff;
		border-top: 2rpx solid #f5f5f5;

		.left-btn {
			font-size: 28rpx;
			color: #000000;

			.ckNum {
				font-size: 14px;
				font-weight: 400;
				color: #8C8C8C;
			}
		}

		.btn {
			display: flex;
			align-items: center;

			.right-btn {
				// margin-right: 90rpx;
				border-radius: 6px;
				background: #0F53AC;
				padding: 20rpx 60rpx;
				color: #fff;
			}

			.right-btn2 {
				margin-right: 16rpx;
				border-radius: 6px;
				background: #ffffff;
				padding: 20rpx 32rpx;
				color: #0F53AC;
				border: 2rpx solid #0F53AC;
			}
		}


	}
</style>
